Day 3 — 前端基礎複習

主題：DOM 操作、事件監聽、CSS 動畫概念
目標：在開始實作遊戲前，重新複習前端的核心技能，確保之後能順利操作網頁元素、觸發互動，並加入基礎動畫效果。

1.DOM 操作（Document Object Model）
DOM 是瀏覽器提供的網頁結構模型，讓 JavaScript 可以直接存取與修改 HTML 元素。
掌握 DOM 操作能夠改變頁面文字、圖片、樣式，或動態新增與刪除元素，是互動網頁和遊戲的基礎，遊戲的每個畫面更新，例如翻牌翻面、角色移動、分數計算，都離不開 DOM 操作。

常用方法：
選取元素
document.getElementById('idName')：選取特定 ID 的元素。
document.getElementsByClassName('className')：選取指定類別的所有元素。
document.querySelector('.class or #id')：選取符合條件的第一個元素。

修改內容
.textContent：改變文字內容。
.innerHTML：改變元素內部的 HTML 結構。

操作屬性
.style：直接修改行內樣式，例如 element.style.color = 'red';。
.setAttribute() / .getAttribute()：設定或取得屬性值。

新增/刪除元素
document.createElement('div')：建立新元素。
appendChild() / removeChild()：加入或刪除子元素。

2.事件監聽（Event Listener）
事件監聽是讓網頁對使用者操作做出回應的關鍵，例如點擊按鈕、滑鼠移動、鍵盤輸入。
學會正確使用事件監聽，可以讓網頁更靈活，也避免程式碼難以維護。

常見事件類型：
click：滑鼠點擊
mouseover / mouseout：滑鼠進入或離開元素
keydown / keyup：鍵盤按下或放開
submit：表單送出

基本語法：

element.addEventListener('事件名稱', function() {
    // 要執行的程式
});

例如：

const btn = document.getElementById('start');
btn.addEventListener('click', function() {
    alert('遊戲開始！');
});

觀念補充：建議使用 addEventListener，而不是 HTML 的 onclick，因為前者更方便管理多個事件和拆分程式碼。
可以搭配條件判斷與 DOM 操作，例如按下鍵盤時控制角色左右移動。

3.CSS 動畫概念
在遊戲設計中，動畫能增加趣味與吸引力，例如翻牌時的翻轉、角色跳躍、按鈕閃爍等。

CSS 動畫有兩大主要方式：
(1)Transition
適合做簡單的過渡效果，例如顏色變化、位置平移、大小縮放。
語法範例：

.card {
    transition: transform 0.5s ease;
}
.card:hover {
    transform: rotateY(180deg);
}

重點在於「狀態改變時」會自動產生平滑效果，例如滑鼠移入、元素屬性變化。

(2)Keyframes Animation
適合連續性的動作，例如角色跑步、背景移動。
語法範例：

@keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}
.character {
    position: relative;
    animation: move 2s infinite alternate;
}

可以自訂多個階段，並控制速度、方向和循環次數。

搭配 JavaScript：
可以用 JS 操控 class 來啟動或停止動畫，例如在按下按鈕後，給角色加上動畫 class。

4. 與遊戲設計的關聯
   DOM 操作：用來改變遊戲狀態，例如顯示分數、更新卡片圖案、創建新障礙物。
   事件監聽：控制遊戲互動，如鍵盤操作角色移動、點擊開始遊戲。
   CSS 動畫：為動態效果加分，例如翻牌翻面、跑酷角色跳躍、迷宮門開啟。

掌握這三項技術，能讓日後的遊戲作品更具「互動感」與「視覺吸引力」。